<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('查看专家管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-managementt-detail" th:object="${idExpert}">
        <input name="id" th:field="*{id}" type="hidden">

        <h4 class="form-header h4">基本信息</h4>
        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">专家姓名：</label>
                    <div class="col-sm-8">
                        <input name="expertName" th:field="*{expertName}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">出生年月：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="birthday" th:value="${#dates.format(idExpert.birthday, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">曾任职务：</label>
                    <div class="col-sm-8">
                        <input name="positions" th:field="*{positions}" class="form-control" type="text">
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">受聘年份：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <input name="employmentTime"
                                   th:value="${#dates.format(idExpert.employmentTime, 'yyyy-MM-dd')}"
                                   class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">审读范围：</label>
                    <!--                        <input name="reviewScope" th:field="*{reviewScope}" class="form-control" type="text">-->

                    <div class="col-sm-8">
                        <!--                            <input name="reviewScope" th:field="*{reviewScope}" class="form-control" type="text">-->
                        <select name="reviewScope" class="form-control noselect2 selectpicker"
                                th:with="type=${@dict.getType('re_review_scope')}" data-none-selected-text="请选择审读范围"
                                required multiple>
                            <option th:each="dict : ${type}"
                                    th:selected="(${#strings.contains(idExpert.reviewScope,dict.dictValue)})"
                                    th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                    selected="selected"></option>
                        </select>

                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">递送地址：</label>
                    <div class="col-sm-8">
                        <input name="deliveryAddress" th:field="*{deliveryAddress}" class="form-control" type="text"
                               required>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">邮政编码：</label>
                    <div class="col-sm-8">

                        <input name="postalCode" th:field="*{postalCode}" class="form-control" type="text">

                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">电子邮件：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="email" th:field="*{email}" class="form-control email" type="text"
                                   maxlength="50" placeholder="请输入邮箱">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label ">联系方式：</label>
                    <div class="col-sm-8">
                        <input name="by1" th:field="*{by1}" class="form-control" type="text">
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">生活照片：</label>
                    <div class="col-sm-10">
                        <input type="hidden" name="photo" th:field="*{photo}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="photo" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">其他说明：</label>
                    <div class="col-sm-10">
                        <textarea name="explanation" maxlength="500" rows="3"
                                  class="form-control">[[*{explanation}]]</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!--            <div class="row">-->
        <!--                <div class="col-sm-offset-5 col-sm-10">-->
        <!--                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;-->
        <!--                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>-->
        <!--                </div>-->
        <!--            </div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    var prefix = ctx + "publish/managementt";
    $("#form-managementt-detail").validate({
        focusCleanup: true
    });
    // $('#reviewScope').val("图书")
    //
    // $('#reviewScope').selectpicker({
    //     'selectedText': '图书'
    // });

    var handle = null;
    $(document).ready(function () {
        handle = setInterval(function () {
            $('input.form-control').attr('readonly', true);
            $('textarea.form-control').attr('readonly', true);
            $('select[name="reviewScope"]').attr("readonly",true).attr('disabled',true);
            $('input[name="birthday"],input[name="employmentTime"]').attr('disabled',true);
            $('.file-actions button[title="删除文件"]').remove();
            $('.btn-file').remove();
            $('.file-caption-main').remove();
            $('button.close').remove();
            if ($('input.form-control').attr('readonly')) {
                clearInterval(handle);
            }
        }, 800);
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/edit", $('#form-managementt-detail').serialize());
        }
    }

    $("input[name='birthday']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='employmentTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    var sca = function (event) {
        $("input[name='" + event.currentTarget.id + "']").val("");
        sca = function () {
        }
    }

    $(".file-upload").each(function (i) {
        var vals = new Array()
        var preList = new Array();
        if ($.common.isNotEmpty($("input[name='" + this.id + "']").val())) {
            var str = $("input[name='" + this.id + "']").val();
            var strs = new Array();
            strs = str.split(",");
            for (i = 0; i < strs.length; i++) {
                vals[i] = ctx.slice(0, ctx.length - 1) + strs[i];
            }

        }
        var previewJson = preList;
        var preConfigList = new Array();
        for ( var i = 0; i < vals.length; i++) {
            var array_element = vals[i];
            var name=vals[i].substring(vals[i].lastIndexOf("/")+1);
            var tjson = {
                caption: name, // 展示的文件名
                width: '100px',
                alt:array_element,
                extra: {id: 100}
            };
            preConfigList[i] = tjson;
        }
        $(this).fileinput({
            uploadUrl: '/common/upload',
            initialPreviewAsData: true,
            initialPreview: vals,
            maxFileCount: 0,
            showUpload: false,
            showRemove: true,
            maxFileSize: 30000,
            autoReplace: true,
            //allowedFileExtensions: ['jpg', 'png', 'bmp', 'jpeg'],
            showUpload: false, //是否显示上传按钮
            showCaption: true,//是否显示标题
            browseClass: "btn btn-primary hide",//按钮样式
            dropZoneTitle: " ",
            otherActionButtons:'<button type="button" class="kv-file-down btn btn-sm btn-default" {dataKey} title="下载附件"><i class="fa fa-cloud-download"></i></button>',
            layoutTemplates: {
                actionDelete: '', //去除上传预览的缩略图中的删除图标
                actionUpload: '',//去除上传预览缩略图中的上传图片图标；
                //     actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },
            previewFileIcon: '<i class="fa fa-file-o text-info"></i>',
            preferIconicPreview: true,// 是否优先显示图标  false 即优先显示图片
            previewFileIconSettings: {
                'docx': '<i class="fa fa-file-word-o text-primary"></i>',
                'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                'sql': '<i class="fa fa-file-word-o text-primary"></i>',
                'txt': '<i class="fa fa-file-text-o text-info"></i>',
                'rtf': '<i class="fa fa-file-text-o text-info"></i>',
            },
            initialPreviewConfig: preConfigList
        }).on('filebatchselected', function (event, data, id, index) {
            $(this).fileinput("upload");
        }).on('fileuploaded', function (event, data, previewId, index) {
            //若重新上传文件，清空当前文件路径,只执行一次清空函数
            sca(event);
            if ($("input[name='" + event.currentTarget.id + "']").val() == "") {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.fileName);
            } else {
                $("input[name='" + event.currentTarget.id + "']").val($("input[name='" + event.currentTarget.id + "']").val() + ',' + data.response.fileName);
            }
        }).on('filecleared', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        }).on('filesuccessremove', function (event, id, index) {
            var fileUrlList = $("input[name='" + event.currentTarget.id + "']").val().split(",");
            fileUrlList.splice(index, 1);
            $("input[name='" + event.currentTarget.id + "']").val(fileUrlList);
        }).on('filedeleted', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        }).on('filepreremove', function (event, id, index) {
            var str_after = index.split('_')[1];
            var fileUrlList = $("input[name='" + event.currentTarget.id + "']").val().split(",");
            fileUrlList.splice(str_after, 1);
            $("input[name='" + event.currentTarget.id + "']").val(fileUrlList);
        });
        // $(this).fileinput('_initFileActions');
    });


    /**
     * 其他按钮（如下载）绑定时间
     */
    $(document).on('click', '.kv-file-down', function (e, id, index) {
        var download = "";
        // 获取父级DIV
        var fileIndex = $(this).parents(".file-preview-frame").attr("data-fileindex");

        var fileValue = $(this).parents(".col-sm-10").children("input").val();
        if (fileIndex) {
            var number = fileIndex.match(/\d/);
            if (number) {
                download = fileValue.split(",")[number];
            }
        }
        var name=download.substring(download.lastIndexOf("/")+1);
        if(download!=""){
            downloadFile(download,name);
        }
    });

    function downloadFile(url,name){
        var a = document.createElement("a");
        a.download = name;
        a.href = url;
        $("body").append(a); // 修复firefox中无法触发click
        a.click();
        $(a).remove();
    };

    function downloadIamge(imgsrc, name) {//下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }
</script>
</body>
</html>